<template>
  <div class="home">
    axios错误处理
  </div>
</template>

<script>
import axios from "axios";

export default {
 
  name: "demo6",
  components: {},
  created() {
    // 请求错误：404接口未找到
    axios.interceptors.request.use(config=>{
      return config
    },err=>{
      return Promise.reject(err)
    })

    // 响应错误
    axios.interceptors.response.use(res=>{
      return res
    },err=>{
       return Promise.reject(err)
    })

    axios.get('/data.json').then((res)=>{
      console.log(res)
    }).catch(err=>{
      // 最终的请求错误都会到这里：
      console.log(err)
    })


    //例子：在实际的开发过程中，一般需要一个统一的错误
    let instance=axios.create({})
    instance.interceptors.request(config=>{
      return config
    },err=>{
       // 请求错误,一般http状态码以4开头，常见:401超时，404 not-found
      return Promise.reject(err)

      // 一般错误处理就出现一个弹窗然后消失
      $('#modal').show()
      setTimeout(()=>{
        $('#modal').hide()
      },2000)
    })
    instance.interceptors.response(res=>{
      return res
    },err=>{
      // 响应错误处理，一般http状态码以5开头，500系统错误，502系统重启
      return Promise.reject(err)
       // 一般错误处理就出现一个弹窗然后消失
      $('#modal').show()
      setTimeout(()=>{
        $('#modal').hide()
      },2000)      
    })
    instance.get('/data/json').then(
      res=>{
        console.log(res)
      }
    ).catch(err=>{
      console.log(err)
    })

  }
};
</script>
